import React from "react"
import Header from "../../components/header/index"
import "./searchAddress.css"
import { NoticeBar, Icon } from 'antd-mobile';
import {getDetailAddress} from "../../api/index"
class SearchAddress extends React.Component{
    constructor(){
        super()
        this.state={
            keyword:"",
            addressArr:[]
        }
    }
    addDetailConfirm(){
        getDetailAddress(this.state.keyword).then(res=>{
            console.log(res)
            this.setState({
                addressArr:[...res.data]
            })
        })
    }
    valHandle(e){
        this.setState({
            keyword:e.target.value
        })
    }
    chanceAddress(item){
        this.props.history.push({
            pathname:"/mine/userInfo/address/add",
            state:item
        })
    }
    render(){
        // console.log(this.state.keyword)
        return(
            <div>
                <Header title={"搜索地址"}/>
                <div className="userInfo-mask"></div>
                <div className="addDetail-wrap">
                     <input type="text" className="searchDetailInput" onChange={this.valHandle.bind(this)}/>
                     <button className="searchDetailConfirmInput" onClick={this.addDetailConfirm.bind(this)}>确认</button>
                </div>
                <NoticeBar marqueeProps={{ loop: false, style: { padding: '0 7.5px' } }}>
                为满足商家的送餐要求，建议您从列表中选择地址
                </NoticeBar>
                <div className='searchHistory'>
                      <div className="searchHistory-title">搜索结果</div>
                      <ul className="searchHistory-main">
                          {this.state.addressArr.map(item=>{
                              return(
                                <li key={item.geohash} onClick={this.chanceAddress.bind(this,item)} >
                                    <h4>{item.name}</h4>
                                    <span className="searchHistory-address">{item.address}</span>
                                </li>
                              )
                          })}
                      </ul>
                 </div>
            </div>
        )
    }
}
export default SearchAddress